<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../文件/jquery-1.8.3.min.js"></script>
    <title>购物车</title>
</head>
<body>
    <table id="table1" border="1">
        <tr>
            <td id="allB" onclick="allS()">全选</td>
            <td>序号</td>
            <td>商品图</td>
            <td>书籍名称</td>
            <td>分类</td>
            <td>出版日期</td>
            <td>价格</td>
            <td>购买数量</td>
            <td>操作</td>
        </tr>
        <tr class="book">
            <td><input class="xuan" type="checkbox"/></td>
            <td>1</td>
            <td></td>
            <td>java实战</td>
            <td>技术</td>
            <td>2015-11-11</td>
            <td>￥<span class="prices">25</span></td>
            <td>
                <button class="jian">-</button>
                <a class="num">1</a>
                <button class="jia">+</button>
            </td>
            <td>
                <button class="del">删除</button>
            </td>
        </tr>
        <tr class="book">
            <td><input class="xuan" type="checkbox"/></td>
            <td>2</td>
            <td></td>
            <td>jquery实战</td>
            <td>技术</td>
            <td>2015-11-11</td>
            <td>￥<span class="prices">30</span></td>
            <td>
                <button class="jian">-</button>
                <a class="num">1</a>
                <button class="jia">+</button>
            </td>
            <td>
                <button class="del">删除</button>
            </td>
        </tr>
        <tr class="book">
            <td><input class="xuan" type="checkbox"/></td>
            <td>3</td>
            <td></td>
            <td>vue实战</td>
            <td>生活</td>
            <td>2015-11-11</td>
            <td>￥<span class="prices">40</span></td>
            <td>
                <button class="jian">-</button>
                <a class="num">1</a>
                <button class="jia">+</button>
            </td>
            <td>
                <button class="del">删除</button>
            </td>
        </tr>
        <tr class="book">
            <td><input class="xuan" type="checkbox"/></td>
            <td>4</td>
            <td></td>
            <td>C++实战</td>
            <td>文学</td>
            <td>2015-11-11</td>
            <td>￥<span class="prices">50</span></td>
            <td>
                <button class="jian">-</button>
                <a class="num">1</a>
                <button class="jia">+</button>
            </td>
            <td>
                <button class="del">删除</button>
            </td>
        </tr>
        <tr class="book">
            <td><input class="xuan" type="checkbox"/></td>
            <td>5</td>
            <td></td>
            <td>Python实战</td>
            <td>文学</td>
            <td>2015-11-11</td>
            <td>￥<span class="prices">55</span></td>
            <td>
                <button class="jian">-</button>
                <a class="num">1</a>
                <button class="jia">+</button>
            </td>
            <td>
                <button class="del">删除</button>
            </td>
        </tr>
    </table><br/>

    <a id="money">总价格为：
        <span class="allprices">0</span>
        元</a>

    

    <script>
        //全选
        var a = document.getElementsByClassName("xuan");
        var flag = 0;
        function allS(){
            if(flag==0){
                for(var i=0;i<a.length;i++){
                    a[i].checked =true;
                }
                flag=1;
            }else{
                for(var i=0;i<a.length;i++){
                    a[i].checked =false;
                }
                flag=0;
            }
            setSum()
        }

        //删除每行商品
        $(".del").click(function() {
            $(this).parent().parent().remove();
            setSum()
        });

        //加减商品数量
        var b = document.getElementById
        $(".jian").click(function() {
            var n=Number($(this).next().text());
            n-=1;
            if(n==0){return;}
            $(this).next().text(n);
            setSum()
           
        });
        $(".jia").click(function() {
            var n=Number($(this).prev().text());
            n+=1;
            $(this).prev().text(n);   
            setSum()                    
        });

        //点击复选框更新价格
        $(".xuan").click(function(){
            setSum()
        });

        //计算总价格
        function setSum() {
            var sum = 0;
            $(".book").each(function() {
                if (($(this).find(".xuan")).prop("checked")) {  //判断复选框有没有选中                                  
                    var num = Number($(this).find("a").text())
                    var Price = Number($(this).find("span").text())
                    sum += num * Price;
                }
            })
            $(".allprices").text(Number(sum))
        }

    </script>
</body>
</html>